<script setup lang="ts">
import { provide, ref } from 'vue';
import ParentComp from './components/ParentComp.vue';
// 爷爷有100块钱  给的孙子花  不让父亲知道
/**
 * 组件跨级通信
 * privide和inject
 * 注意：vue中是单向数据流，数据在哪里修改的方法就在哪里
 * 因此孙子想花爷爷的钱，方法是写在爷爷这里的
 */
const money = ref(100)
const pagMoney = (count: number) => {
  money.value -= count
}
// 提供数据
provide('money', money)
provide('pagMoney', pagMoney)
</script>

<template>
  <div class="app-page" style="border: 10px solid #ccc; padding: 50px; width: 600px">
    爷爷组件 {{ money }}
    <ParentComp />
  </div>
</template>